<template>
  <div class="map-page">
    <div ref="dom" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts"
import { ref, onMounted, defineProps } from "vue"

interface CompanyData {
  TestYear: number;
  CompanyName: string;
  TotalCount: number;
}

interface ConvertedData {
  year: string[];
  list: { name: string; data: number[] }[];
}

const props = defineProps({
  SuspiciousData: {
    type: Object,
    required: true
  }
})

const dom = ref(null)
function convertData(data: { [key: string]: CompanyData[] }): ConvertedData {
  const years = Array.from({ length: 5 }, (_, index) => (new Date().getFullYear() - index) + "年");
  const companies: string[] = Object.keys(data);
  const convertedData: ConvertedData = {
    year: years,
    list: []
  };

  for (const company of companies) {
    const companyData: number[] = [];
    for (const year of years) {
      const yearData = data[company].find(item => item.TestYear.toString() === year.substring(0, 4));
      companyData.push(yearData ? yearData.TotalCount : 0);
    }
    convertedData.list.push({ name: company, data: companyData });
  }

  return convertedData;
}
const initCharts = () => {
  const colorList = {
    中国航油: "#E44954",
    中国石化: "#E3BD81",
    中国石油: "#0A4FE8",
    其他: "#86F280",
  }
  function getColor(name) {
    if (Object.hasOwnProperty.call(colorList, name)) {
      return colorList[name];
    } else {
      // 随机生成颜色
      return "#" + Math.floor(Math.random() * 16777215).toString(16);
    }
  }
  const charesData: any = convertData(props.SuspiciousData);
  const series = charesData.list.map((e) => {
    const color = getColor(e.name)
    const item = {
      name: e.name,
      type: "bar",
      smooth: false,
      barWidth: 8,
      symbolSize: 8,
      zlevel: 3,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: color, // 0% 处的颜色
            },
            {
              offset: 1,
              color: color, // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
      data: e.data,
    }
    return item
  })
  const charts = echarts.init(dom.value)
  const option = {
    legend: {
      top: "5px",
      show: true,
      left: "0%",
      itemWidth: 13,
      itemHeight: 13,
      textStyle: {
        color: "#ffffff",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    grid: {
      x: "7%",
      y: "15%",
      x2: "3%",
      y2: "7%",
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
          },
        },
        axisLabel: {
          show: true,
          // margin: 20,
          textStyle: {
            color: "#ffffff",
          },
        },
        axisTick: {
          show: false,
        },
        // boundaryGap: true,
        data: charesData.year,
      },
    ],
    yAxis: [
      {
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
          },
        },
        axisLabel: {
          show: true,
          // margin: 20,
          textStyle: {
            color: "#ffffff",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: series,
  }
  option && charts.setOption(option)
}
onMounted(() => {
  initCharts()
})
</script>

<style lang="scss" scoped>
.map-page {
  height: calc(100% - 3rem);
  width: 100%;
}
</style>
